<template>
  <view class="content">
    <view class="banner" style="
        background-image: url(../../static/stopCar/cp_bg2.png);
        background-size: 100% 100%;
      ">
      <text>停车缴费</text>
      <text>查询是否需要缴费</text>
    </view>
    <view class="number-content">
      <view class="carInfo">
        <view class="carTitle">
          <view class="car">
            <text>{{ orderInfo.carNum || '暂无车牌' }}</text>
            <!-- <u-icon class="icons" name="arrow-down" size="24"></u-icon> -->
          </view>
          <view class="edit" @click.stop="handleGoback">
            <u-icon name="edit-pen" size="24"></u-icon>
            <text>更改车牌</text>
          </view>
        </view>
        <view class="info-content">
          <!-- 两种情况.有无停车信息展示 -->

          <view class="found" v-if="orderInfo.parkingName">
            <text>{{ orderInfo.parkingName }}</text>
            <view class="money">
              ￥<text>{{ totalCost }}</text>
            </view>
            <text>时长:{{ totalTime ? totalTime : "0" }}分钟</text>
          </view>
          <view class="not-found" v-else>
            <view>未查询到该车辆入场信息</view>
            <text>如在场内请到资源手费处</text>
          </view>
        </view>
      </view>
      <view class="history">
        <text>历史缴费车辆</text>
        <view class="history-content">
          <view class="carList" v-for="item in carList" :key="item.id">
            <view class="carList-item">
              {{ item.carNum }}
            </view>
          </view>
        </view>
        <u-button type="primary" :custom-style="buttonStyle" @click="paymentRecords" :loading="loading">确定</u-button>
        <u-button :custom-style="{ ...buttonStyle, marginTop: '20rpx', color: '#fff' }" @click="handlePay">缴费记录</u-button>
      </view>
    </view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      buttonStyle: {
        fontSize: "32rpx",
        borderRadius: "16rpx",
        background: "#1677FE",
        height: "100rpx",
        margin: "0rpx 55rpx 0rpx",
      },
      orderInfo: "",
      totalCost: "",
      totalTime: "",
      carList: [],
      loading: false,
    };
  },
  onLoad(option) {
    if (option) {
      let info = JSON.parse(decodeURIComponent(option.parkInfo));
      this.orderInfo = info.orderInfo;
      this.totalCost = info.totalCost;
      this.totalTime = info.totalTime;
    }
    let openid = uni.getStorageSync("userInfo").openid;
    this.$Api
      .getHistoryCarList({
        openid,
      })
      .then((res) => {
        this.carList = res.data.carList.slice(0, 6) || [];
      });
  },
  methods: {
    handlePay() {
      uni.navigateTo({
        url: "../paymentRecords/index?carNum=" + (this.orderInfo ? this.orderInfo.carNum : '')
      });
    },
    paymentRecords() {
      let openid = uni.getStorageSync("userInfo").openid;
      this.$Api
        .doOrderPay({
          openid,
          orderId: this.orderInfo.id,
          couponId: this.orderInfo || "",
          version: this.orderInfo.version,
        })
        .then((res) => {
          uni.requestPayment({
            provider: "wxpay",
            prepayId: res.data.prepayId,
            success: function () {
              this.$refs.uToast.show({
                title: "支付成功",
                type: "success",
              });
            },
            fail: function () {
              this.$refs.uToast.show({
                title: "支付失败",
                type: "error",
              });
            },
          });
        });
    },
    handleGoback() {
      uni.navigateTo({
        url: "../../pagesA/stopCar/index"
      })
    },
  },
};
</script>

<style scoped lang="scss">
@import "index.scss";
</style>
